<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>

			* {
			    margin: 0;
			    padding: 0;
			}

			ul, li {
			    list-style: none;
			}

			.tab-wp {
			    width: 500px;
			    height: 300px;
			    background-color: #fffccc;
			    margin: 50px auto 0;
			    overflow: hidden;
			}

			.tab-header {
			    overflow: hidden;
			}

			.tab-header li {
			    float: left;
			    width: 100px;
			    height: 50px;
			    line-height: 50px;
			    text-align: center;
			    cursor: pointer;
			}

			.tab-header li.on {
			    background-color: red;
			}

			.tab-cnt > div {
			    height: 250px;
			}


		</style>
	</head>
	<body>
		
		<div class="tab1" class="tab-wp" data-eve="mouseover">
	        <ul class="tab-header">
	            <li class="on">aaa</li>
	            <li>bbb</li>
	            <li>ccc</li>
	        </ul>
	        <div id="tabCnt" class="tab-cnt">
	            <div>111</div>
	            <div>222</div>
	            <div>333</div>
	        </div>
	    </div>

	    <hr>

	    <div class="tab1" class="tab-wp">
	        <ul class="tab-header">
	            <li class="on">aaa</li>
	            <li>bbb</li>
	            <li>ccc</li>
	            <li>ddd</li>
	        </ul>
	        <div id="tabCnt" class="tab-cnt">
	            <div>111</div>
	            <div>222</div>
	            <div>333</div>
	            <div>444</div>
	        </div>
	    </div>

	    <hr>

	    <div class="tab1" class="tab-wp" data-eve="mouseover">
	        <ul class="tab-header">
	            <li class="on">aaa</li>
	            <li>bbb</li>
	            <li>ccc</li>
	            <li>ddd</li>
	            <li>eee</li>
	        </ul>
	        <div id="tabCnt" class="tab-cnt">
	            <div>111</div>
	            <div>222</div>
	            <div>333</div>
	            <div>444</div>
	            <div>555</div>
	        </div>
	    </div>

	<script src="../lib/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/jquery.tab.js" type="text/javascript" charset="utf-8"></script>
	<script>
	   $('.tab1').tab();
	</script>
</body>
</html>